<template>
  <svg xmlns="http://www.w3.org/2000/svg" 
    :width="_width" 
    :height="_height"
    :spin="spin"
    :rtl="rtl"
    viewBox="0 0 1064 1024"
    preserveAspectRatio="xMidYMid meet"
    fill=""
    role="presentation"
    ref="host"
  >
    <g><path fill="#DA0042" d="M1.894 465.92a271.36 271.36 0 1 0 542.72 0 271.36 271.36 0 1 0-542.72 0Z"/><path fill="#004288" d="M988.877 102.769a38.84 38.84 0 0 0-35.697-35.461C707.932 48.23 531.292 166.922 422.154 316.836c-60.313-19.763-125.071-12.728-184.115 20.541-56.883 32.051-105.329 86.027-136.427 152.013a38.84 38.84 0 0 0 53.248 50.913c62.197-32.788 132.218-26.613 174.264 15.38l171.233 171.05c.307.327.512.717.84 1.034 42.015 41.964 48.2 111.882 15.39 173.957a38.85 38.85 0 0 0 50.873 53.31c66.048-31.058 120.084-79.463 152.166-136.285 33.506-59.35 40.469-124.467 20.245-185.057 44.042-31.61 83.466-67.236 116.582-105.881 101.673-118.682 146.227-261.673 132.424-425.042zm-760.71 339.067c41.32-41.268 94.362-65.905 149.607-56.218a737.178 737.178 0 0 0-39.7 81.275c-33.065-17.797-70.892-26.45-109.906-25.057zM615.077 828.6c1.362-39.403-7.465-77.516-25.6-110.756a798.833 798.833 0 0 0 81.684-40.294c10.445 55.757-14.336 109.363-56.084 151.04zm-76.82-173.824-136.91-136.765c68.609-183.808 239.033-380.19 512.031-374.887 9.175 325.346-259.44 466.258-375.122 511.652zm250.951-387a63.642 63.642 0 0 1 18.453 44.677 63.406 63.406 0 0 1-18.453 44.575 63.724 63.724 0 0 1-44.667 18.534 63.488 63.488 0 0 1-44.575-18.534 63.508 63.508 0 0 1-18.544-44.585c0-16.6 6.8-32.911 18.544-44.667a63.212 63.212 0 0 1 44.575-18.452 63.59 63.59 0 0 1 44.667 18.452zM242.381 671.099c-44.647 44.605-46.387 133.929-46.285 151.255.123 21.279 17.336 39.25 38.605 39.25h1.26c19.998 0 105.83-3.277 149.473-46.858 27.555-27.536 33.341-55.624 33.341-74.066 0-25.867-11.11-51.344-31.273-71.496-49.152-49.09-109.68-33.485-145.121 1.925zm88.146 88.054c-9.564 9.554-31.048 16.046-52.972 19.753 3.789-22.119 10.414-43.54 19.722-52.839 6.35-6.328 12.39-10.567 18.944-10.567 5.039 0 10.384 2.508 16.384 8.499 5.397 5.386 8.48 11.346 8.48 16.363 0 6.81-5.735 13.978-10.548 18.79z"/></g>
  </svg>
</template>

<script lang="ts">
import { Vue, prop } from 'vue-class-component';

class Props {
    width = prop<number | string>({
      type: [Number, String],
      required: false
    })
    
    height = prop<number | string>({
      type: [Number, String],
      required: false
    })
    
    stroke = prop<string>({
      type: String,
      required: false
    })
    
    fill = prop<string>({
      type: String,
      required: false
    })
    
    color = prop<string>({
      type: String,
      required: false
    })
    
    spin = prop<boolean>({
      type: Boolean,
      required: false
    })
    
    rtl = prop<boolean>({
      type: Boolean,
      required: false
    })
    

  // optional prop with default
  size = prop<number | string>({ default: '1em' })
}

export default class Group626403 extends Vue.with(Props) {
    get _fill(): string | undefined {
        return this.fill || this.color
    }
    get _stroke(): string | undefined {
        return this.stroke || this.color
    }
    get _width(): string | number {
      return this.width || this.size
    }
    get _height(): string | number {
      return this.height || this.size
    }
  mounted():void {
        if (!this._fill) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-fill]').forEach(item => {
            item.setAttribute('fill', item.getAttribute('data-follow-fill') || '')
            })
        }
        if (!this._stroke) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-stroke]').forEach(item => {
            item.setAttribute('stroke', item.getAttribute('data-follow-stroke') || '')
            })
        }
    }
    updated():void {
        if (!this._fill) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-fill]').forEach(item => {
            item.setAttribute('fill', item.getAttribute('data-follow-fill') || '')
            })
        }
        if (!this._stroke) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-stroke]').forEach(item => {
            item.setAttribute('stroke', item.getAttribute('data-follow-stroke') || '')
            })
        }
    }
}
</script>

<style scoped>
svg[spin="true"] {animation: iconpark-spin 1s infinite linear;}
svg[spin="true"][rtl="true"] {animation: iconpark-spin-rtl 1s infinite linear;}
svg[rtl="true"] {
  transform: scaleX(-1);
}
@keyframes iconpark-spin {
  0% { -webkit-transform: rotate(0); transform: rotate(0);} 100% {-webkit-transform: rotate(360deg); transform: rotate(360deg);}
}
@keyframes iconpark-spin-rtl {
  0% {-webkit-transform: scaleX(-1) rotate(0); transform: scaleX(-1) rotate(0);} 100% {-webkit-transform: scaleX(-1) rotate(360deg); transform: scaleX(-1) rotate(360deg);}
}
</style>
